<template>
	<view class="content" :style="theme">
		<view class="head">
			<image :src="user.showAvatar ? user.showAvatar : imgHost+'/user.png'" class="touxian"></image>
			<view @click="uploadimg">更换头像</view>
		</view>
		<view class="ul" v-if="!show">
			<view class="li flex">
				<view class="left">用户名</view>
				<view class="right">
					<input placeholder="请输入用户名" v-model="user.nickName" maxlength="10" />
				</view>
			</view>
			<view class="li flex">
				<view class="left">手机号</view>
				<view class="right flex-cb">
					<input placeholder="请输入用户名" v-model="user.phone" maxlength="11" readonly disabled />
					<text @click="jump('/pages/home/phone')">修改</text>
				</view>
			</view>
			<view class="li flex">
				<view class="left">性别</view>
				<view class="right on">
					<u-radio-group v-model="user.sex" placement="row">
						<u-radio activeColor="var(--color)" name="1" label="男"
							:customStyle="{marginRight: '20rpx'}"></u-radio>
						<u-radio activeColor="var(--color)" name="2" label="女"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="li flex">
				<view class="left">真实姓名</view>
				<view class="right">
					<input placeholder="请输入真实姓名" v-model="user.realName" maxlength="10" />
				</view>
			</view>
			<view class="li flex">
				<view class="left">身份证</view>
				<view class="right">
					<input placeholder="请输入身份证" type="idcard" v-model="user.identityNumber" maxlength="18" />
				</view>
			</view>
			<!-- <view class="li flex">
				<view class="left">地址</view>
				<view class="right">
					<input placeholder="请输入地址" v-model="user.address" maxlength="100" />
				</view>
			</view> -->

			<view v-if="showFace==1" class="li flex">
				<view class="left">个人头像</view>
				<view class="right rights" @click="previewImages">
					<image v-if="user.showFaceUrl" :src="user.showFaceUrl" class="renlian"></image>
					<image v-if="!user.faceUrl" class="renlian" :src="imgHost+'/btn_facepic.png'"></image>
					<view v-if="user.faceUrl">重新上传</view>
				</view>
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="box_footer_agree">
			<view class="checkboxBoxD" @click="isTyBtn">
				<view class="checkboxBox" :class="isActive?'on':''">
					<u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
				</view>
			</view>
			<view>点击即视为同意<text @click='open'>《用户协议》</text></view>
		</view>
		<!-- #endif -->
		<view class="tjbtn">
			<view class="footBtn" @click="$noMultipleClicks(tjbtn)">提交</view>
		</view>
		<u-popup :show="agreement" @close="showxy" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="open">《用户协议》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="showxy">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup ref="privacyComponent" @agree-privacy="onAgreePrivacy"
			@reject-privacy="onRejectPrivacy"></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				user: {},
				noClick: true,
				fileList: [{
					url: 'https://img.yzcdn.cn/vant/leaf.jpg',
					name: '图片1',
				}],
				agreement: false,
				showFace: 0,
				xy: "",
				isActive: false,
				show: false,
			}
		},
		onLoad() {
			// this.getYx()
			this.getMemberInformation()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			onAgreePrivacy() {
				// 用户同意隐私政策
				// 在这里添加您想要执行的代码
				this.isActive = true
				console.log('User agreed to the privacy policy');
			},
			onRejectPrivacy() {
				// 用户拒绝隐私政策
				// 在这里添加您想要执行的代码
				console.log('User rejected the privacy policy');
			},
			isTyBtn() {
				this.isActive = !this.isActive
			},
			showxy() {
				this.agreement = !this.agreement
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_USER'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.xy = res.recordList[0].value
					}
				}).catch(() => {})
			},
			open() {
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_USER&title=', '用户协议')
			},
			qrBtn() {
				this.isActive = true
				this.agreement = false
				this.tjbtn()
			},
			tjbtn() {
				if (!this.isActive) {
					return this.agreement = true
				}
				this.$app.ajax({
					data: {
						userId: this.user.id,
						param: this.user
					},
					api: this.$api.updateMemberInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$app.showToast('提交成功')
						this.getMemberInformation(3)

					}
				}).catch(() => {})
			},
			previewImages() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						that.$app.showLoading('上传中，请稍后...')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.getImageInfo({
							src: tempFilePaths[0],
							success: (image) => {
								uni.uploadFile({
									url: that.$app.baseUrls,
									filePath: image.path,
									fileType: 'image',
									formData: {
										folder: 'MEMBER_IMG',
										type: ''
									},
									header: {
										// #ifdef MP
										'content-type': 'application/json',
										Cookie: uni.getStorageSync('cookie'),
										// #endif
										// #ifdef H5
										platform: '3',
										token: uni.getStorageSync('token'),
										// #endif
										shopId: that.$store.state.shopId,
										gymId: that.venueId
									},
									name: 'file',
									success: (uploadFileRes) => {
										that.$app.closeLoading()
										if (uploadFileRes.statusCode == 413) {
											that.$app.showToast('图片太大')
										} else if (uploadFileRes.statusCode == 200 &&
											uploadFileRes.data) {
											let user = {
												...that.user
											}
											user.showFaceUrl = JSON.parse(
												uploadFileRes
												.data).showUrl
											user.faceUrl = JSON.parse(
												uploadFileRes
												.data).insertUrl
											that.user = user
										} else {
											that.$app.showToast('上传失败')
										}
									},
									fail: (err) => {
										that.$app.closeLoading()
										console.log('err', err);
									},
								});
							}
						});
					}
				});
			},
			uploadimg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (chooseImageRes) => {
						that.$app.showLoading('上传中，请稍后...')
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.getImageInfo({
							src: tempFilePaths[0],
							success: (image) => {
								uni.uploadFile({
									url: that.$app.baseUrls,
									filePath: image.path,
									fileType: 'image',
									formData: {
										folder: 'MEMBER_IMG',
										type: ''
									},
									header: {
										// #ifdef MP
										Cookie: uni.getStorageSync('cookie'),
										'content-type': 'application/json',
										// #endif
										// #ifdef H5
										platform: '3',
										token: uni.getStorageSync('token'),
										// #endif
										shopId: that.$store.state.shopId,
										gymId: that.venueId
									},
									name: 'file',
									success: (uploadFileRes) => {
										that.$app.closeLoading()
										if (uploadFileRes.statusCode == 413) {
											that.$app.showToast('图片太大')
										} else if (uploadFileRes.statusCode == 200 &&
											uploadFileRes.data) {
											let user = {
												...that.user
											}
											user.showAvatar = JSON.parse(
												uploadFileRes
												.data).showUrl
											user.avatar = JSON.parse(
												uploadFileRes
												.data).insertUrl
											that.user = user
										} else {
											that.$app.showToast('上传失败')
										}
									},
									fail: (err) => {
										that.$app.closeLoading()
										console.log('err', err);
									},
								});
							}
						});
					}
				});
			},

			getMemberInformation(type) {
				this.$app.ajax({
					data: {
						param: {}
					},
					api: this.$api.memberInformation()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (type && type == 3) {
							this.$store.commit('saveUserInfo', res.record);
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							this.user = {
								id: res.record.id,
								avatar: res.record.avatar,
								address: res.record.address,
								faceUrl: res.record.faceUrl,
								phone: res.record.phone,
								showFaceUrl: res.record.showFaceUrl,
								showAvatar: res.record.showAvatar,
								nickName: res.record.nickName,
								sex: res.record.sex && res.record.sex != '0' ? res.record.sex : '',
								realName: res.record.realName && res.record.realName != 'string' ? res.record
									.realName : '',
								email: res.record.email && res.record.email != 'string' ? res.record.email :
									'',
								identityNumber: res.record.identityNumber && res.record.identityNumber !=
									'string' ? res.record.identityNumber : '',
							}
							if (res.record.showFace) {
								this.showFace = res.record.showFace
							} else {
								this.showFace = 0
							}
						}
					}
				}).catch(() => {})
			},

		}

	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.content {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.head {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		view {
			width: 136rpx;
			line-height: 48rpx;
			text-align: center;
			border-radius: 32rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: $color;
			border: 1px solid $color;
		}

		.touxian {
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
			margin: 20rpx 0;
		}
	}


	.li {
		font-size: 32rpx;
		padding: 0 30rpx;
		align-items: center;
	}

	.left {
		width: 150rpx;
		line-height: 80rpx;
		color: #777777;
		font-size: 30rpx;
	}

	.right {
		flex: 1;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: 1px solid #E5E5E5;
		line-height: 60rpx;
	}

	.right.on {
		padding: 30rpx 0;
	}

	.right input {
		line-height: 60rpx;
		font-size: 32rpx;
		height: 70rpx;
		z-index: 1 !important;
	}

	.right text {
		font-size: 28rpx;
		color: $color;
		width: 60rpx;
		flex: none;
	}

	.tjbtn {
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		width: 690rpx;
		z-index: 999;
	}

	.renlian {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}

	.rights {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rights view {
		color: #999999;
		font-size: 28rpx;
	}

	.box_footer_agree {
		display: flex;
		padding: 0 30rpx;
		margin-top: 20rpx;
		align-items: center;

		text {
			color: #333333;
			font-size: 26rpx;
			margin-left: 5rpx;
			color: $color;
		}
	}
</style>